<template>
  <view v-if="show">
    <Modal
      v-model:visible="OTAFlag"
      :title="$t('TT.otaUpgradeIRF.Title')"
      catchtouchmove="true"
      :ok-text="otaToastButtonText"
      :ok-disabled="otaClickEnable"
      @ok="closeOTAPop"
    >
      <view class="line-des">{{ otaToastConnect }}</view>
    </Modal>
  </view>
</template>

<script setup lang="ts">
import Modal from '@/common/modal.vue'

const props = defineProps<{
  show: boolean
  mcuStatus: number
}>()

const emit = defineEmits<{
  (e: 'update', isUpgrade: boolean): void
}>()

const OTAFlag = ref(false)
const otaToastButtonText = ref('')
const otaClickEnable = ref(false)
const otaToastConnect = ref('')

watch(
  () => OTAFlag.value,
  (value) => {
    emit('update', value)
  }
)

watch(
  () => props.show,
  (show) => {
    if (!show) return
    nextTick(() => {
      getUpdateStatus(Number(props.mcuStatus))
    })
  }
)

watch(
  () => props.mcuStatus,
  (value) => {
    getUpdateStatus(Number(value))
  }
)
function getUpdateStatus(value: number) {
  if (value !== 0) {
    OTAFlag.value = true
    otaClickEnable.value = true
    otaToastConnect.value = '为了您能够更好地使用设备，正在为您进行升级，大约需要1-2分钟。'
    otaToastButtonText.value = '正在升级...'
  } else {
    if (OTAFlag.value) {
      otaClickEnable.value = false
      otaToastConnect.value = '升级成功！'
      otaToastButtonText.value = '我知道了'
    }
  }
}
/**
 * 关闭弹框
 */
function closeOTAPop() {
  OTAFlag.value = false
}
</script>

<style lang="less"></style>
